import React, { useEffect, useState } from 'react';
import {
  Form,
  Input,
  Button,
  Table,
  Pagination,
  DatePicker,
  Space,
  Select,
  Spin,
} from 'antd';
import request from '../../../http.js';
import { history } from 'umi';
import './index.css';

const { RangePicker } = DatePicker;
const { Option } = Select;

const Absence = () => {
  const columns = [
    {
      title: '申请提交日期',
      dataIndex: '申请提交日期',
      key: '申请提交日期',
    },
    {
      title: '院系',
      dataIndex: '院系',
      key: '院系',
    },
    {
      title: '专业',
      dataIndex: '专业',
      key: '专业',
    },
    {
      title: '年级',
      dataIndex: '年级',
      key: '年级',
    },
    {
      title: '班级',
      dataIndex: '班级',
      key: '班级',
    },
    {
      title: '小组',
      dataIndex: '小组',
      key: '小组',
    },
    {
      title: '学号',
      dataIndex: '学号',
      key: '学号',
    },
    {
      title: '姓名',
      dataIndex: '姓名',
      key: '姓名',
    },
    {
      title: '主题',
      dataIndex: '主题',
      key: '主题',
    },
    {
      title: '请假原因',
      dataIndex: '请假原因',
      key: '请假原因',
    },
    {
      title: '原因说明',
      dataIndex: '原因说明',
      key: '原因说明',
    },
    {
      title: '请假开始时间',
      dataIndex: '请假开始时间',
      key: '请假开始时间',
    },
    {
      title: '请假结束时间',
      dataIndex: '请假结束时间',
      key: '请假结束时间',
    },
    {
      title: '审批状态',
      dataIndex: '审批状态',
      key: '审批状态',
    },
    {
      title: '审批人',
      dataIndex: '审批人',
      key: '审批人',
    },
    {
      title: '操作',
      key: '操作',
      render: (record) => (
        <Space size="middle">
          <a onClick={() => ViewReason(record.leaveInfoId)}>详情</a>
        </Space>
      ),
    },
  ];

  //查看请假详情
  const ViewReason = (leaveInfoId) => {
    history.push({
      pathname: '/admin/absence/ViewReason/index',
      query: {
        leaveInfoId: leaveInfoId,
      },
    });
  };

  //定义表格数据
  const [data, setdata] = useState([{}]);
  //接收的分页数
  const [sum, setsum] = useState(1);
  const [sumPage, setsumPage] = useState(1);
  //判断分页搜索
  const [pagination, setpagination] = useState('false');
  const [pagination1, setpagination1] = useState('true');
  //接收下拉框请求
  const [College, setCollege] = useState([{}]);
  const [Major, setMajor] = useState([{}]);
  const [Grade, setGrade] = useState([{}]);
  const [Class1, setClass1] = useState([{}]);
  const [Group, setGroup] = useState([{}]);
  const [Reason, setReason] = useState([{}]);
  const [State, setState] = useState([{}]);
  const [Person, setPerson] = useState([{}]);
  //获取输入的值
  const [gDate, setgDate] = useState(0);
  const [gCollege, setgCollege] = useState(0);
  const [gMajor, setgMajor] = useState(0);
  const [gGrade, setgGrade] = useState(0);
  const [gClass1, setgClass1] = useState(0);
  const [gGroup, setgGroup] = useState(0);
  const [gStudentNumber, setgStudentNumber] = useState(0);
  const [gName, setgName] = useState(0);
  const [gTheme, setgTheme] = useState(0);
  const [gReason, setgReason] = useState(0);
  const [gState, setgState] = useState(0);
  const [gPerson, setgPerson] = useState(0);
  //加载
  const [loading, setloading] = useState(0);

  //周期查询
  useEffect(() => {
    //查询所有
    request
      .post('/ack/admin/QueryForLeaveInfoCondition', {
        account: '',
        accountid: '',
        dkey: 0,
        gkey: 0,
        gradeKey: 0,
        id: 0,
        name: 0,
        number: 10,
        page: 1,
        projectgroupid: '',
        reason: '',
        st: 0,
        submissionDate: '',
        theme: '',
        userName: '',
      })
      .then((res) => {
        console.log('管理员--请假查询成功了', res.data);
        setloading(1);
        const p = res.data.returnDate;
        const newP = p.map((dataObj) => {
          return {
            申请提交日期: dataObj.submissionDate,
            院系: dataObj.dkey,
            专业: dataObj.gkey,
            年级: dataObj.gradeKey,
            班级: dataObj.className,
            小组: dataObj.projectGroupId,
            学号: dataObj.account,
            姓名: dataObj.userName,
            主题: dataObj.theme,
            请假原因: dataObj.reason,
            原因说明: dataObj.explain,
            请假开始时间: dataObj.startDateTime,
            请假结束时间: dataObj.endDateTime,
            审批状态: dataObj.st,
            审批人: dataObj.teacherName,
            leaveInfoId: dataObj.leaveInfoId,
          };
        });
        setdata(newP);
        setsum(res.data.paginationData.sum);
        setsumPage(res.data.paginationData.sumPage);
      });

    //院系请求
    request.post('/common/a_t_s/queryAllGrades').then((res) => {
      // console.log("院系请求成功了",res.data)
      setCollege(res.data);
    });

    //专业请求
    request.post('/common/a_t_s/queryAllMajor').then((res) => {
      // console.log("院系请求成功了",res.data)
      setMajor(res.data);
    });

    //年级请求
    request.post('/common/a_t/notEnumGrade').then((res) => {
      // console.log("年级请求成功了",res.data)
      setGrade(res.data);
    });

    //班级请求
    request.post('/common/a_t/enumClass').then((res) => {
      // console.log("班级请求成功了",res.data)
      setClass1(res.data);
    });

    //小组请求
    request
      .post('/common/a_t/queryAllProjectGroups', {
        annexId: '',
        fileName: '',
        isGraduated: 0,
        path: '',
      })
      .then((res) => {
        // console.log("小组请求成功了",res.data)
        setGroup(res.data);
      });

    //请假原因请求
    request.get('/ask/TeacherLeaveReason').then((res) => {
      // console.log("请假原因请求请求成功了",res.data)
      setReason(res.data);
    });

    //审批状态请求
    request.get('/ask/TeacherState').then((res) => {
      // console.log("审批状态请求成功了",res.data)
      setState(res.data);
    });

    //审批人请求
    request.post('/common/a_t_s/queryResponsibilityName').then((res) => {
      // console.log("审批人请求成功了",res)
      setPerson(res.data);
    });
  }, []);

  //分页搜索
  function pageChange(page, pageSize) {
    if (pagination == 'false') {
      //查询所有
      request
        .post('/ack/admin/QueryForLeaveInfoCondition', {
          account: '',
          accountid: '',
          dkey: 0,
          gkey: 0,
          gradeKey: 0,
          id: 0,
          name: 0,
          number: pageSize,
          page: page,
          projectgroupid: '',
          reason: '',
          st: 0,
          submissionDate: '',
          theme: '',
          userName: '',
        })
        .then((res) => {
          // console.log("管理员--请假查询成功了",res.data)
          const p = res.data.returnDate;
          const newP = p.map((dataObj) => {
            return {
              申请提交日期: dataObj.submissionDate,
              院系: dataObj.dkey,
              专业: dataObj.gkey,
              年级: dataObj.gradeKey,
              班级: dataObj.className,
              小组: dataObj.projectGroupId,
              学号: dataObj.account,
              姓名: dataObj.userName,
              主题: dataObj.theme,
              请假原因: dataObj.reason,
              原因说明: dataObj.explain,
              请假开始时间: dataObj.startDateTime,
              请假结束时间: dataObj.endDateTime,
              审批状态: dataObj.st,
              审批人: dataObj.teacherName,
              leaveInfoId: dataObj.leaveInfoId,
            };
          });
          setdata(newP);
          setsum(res.data.paginationData.sum);
          setsumPage(res.data.paginationData.sumPage);
        });
    } else if (pagination1 == 'true') {
      //查询所有
      request
        .post('/ack/admin/QueryForLeaveInfoCondition', {
          account: '',
          accountid: '',
          dkey: 0,
          gkey: 0,
          gradeKey: 0,
          id: 0,
          name: 0,
          number: 10,
          page: 1,
          projectgroupid: '',
          reason: '',
          st: 0,
          submissionDate: '',
          theme: '',
          userName: '',
        })
        .then((res) => {
          console.log('管理员--查询后分页查询成功了', res.data);
          const p = res.data.returnDate;
          const newP = p.map((dataObj) => {
            return {
              申请提交日期: dataObj.submissionDate,
              院系: dataObj.dkey,
              专业: dataObj.gkey,
              年级: dataObj.gradeKey,
              班级: dataObj.className,
              小组: dataObj.projectGroupId,
              学号: dataObj.account,
              姓名: dataObj.userName,
              主题: dataObj.theme,
              请假原因: dataObj.reason,
              原因说明: dataObj.explain,
              请假开始时间: dataObj.startDateTime,
              请假结束时间: dataObj.endDateTime,
              审批状态: dataObj.st,
              审批人: dataObj.teacherName,
              leaveInfoId: dataObj.leaveInfoId,
            };
          });
          setdata(newP);
          setsum(res.data.paginationData.sum);
          setsumPage(res.data.paginationData.sumPage);
        })
        .catch(() => {
          // alert("该查询没有数据!")
          setdata('');
        });
    }
  }

  //查询搜索
  const Query = () => {
    console.log(
      gDate,
      gCollege,
      gMajor,
      gGrade,
      gClass1,
      gGroup,
      gStudentNumber,
      gName,
      gTheme,
      gReason,
      gState,
      gPerson,
    );
    //查询所有
    request
      .post('/ack/admin/QueryForLeaveInfoCondition', {
        account: gStudentNumber || '',
        accountid: gPerson || '',
        dkey: gCollege || 0,
        gkey: gMajor || 0,
        gradeKey: gGrade || 0,
        id: gGroup || 0,
        name: gClass1 || 0,
        number: 10,
        page: 1,
        projectgroupid: gClass1 || '',
        reason: gReason || '',
        st: gState || 0,
        submissionDate: gDate || '',
        theme: gTheme || '',
        userName: gName || '',
      })
      .then((res) => {
        console.log('管理员--查询请假查询成功了', res.data);
        const p = res.data.returnDate;
        const newP = p.map((dataObj) => {
          return {
            申请提交日期: dataObj.submissionDate,
            院系: dataObj.dkey,
            专业: dataObj.gkey,
            年级: dataObj.gradeKey,
            班级: dataObj.className,
            小组: dataObj.projectGroupId,
            学号: dataObj.account,
            姓名: dataObj.userName,
            主题: dataObj.theme,
            请假原因: dataObj.reason,
            原因说明: dataObj.explain,
            请假开始时间: dataObj.startDateTime,
            请假结束时间: dataObj.endDateTime,
            审批状态: dataObj.st,
            审批人: dataObj.teacherName,
            leaveInfoId: dataObj.leaveInfoId,
          };
        });
        setdata(newP);
        setsum(res.data.paginationData.sum);
        setsumPage(res.data.paginationData.sumPage);
        setpagination('true');
        setpagination1('true');
      })
      .catch(() => {
        alert('该查询没有数据!');
        setdata('');
        setsum('');
      });
  };

  //重置
  const reset = () => {
    history.go(0);
    request
      .post('/ack/admin/QueryForLeaveInfoCondition', {
        account: '',
        accountid: '',
        dkey: 0,
        gkey: 0,
        gradeKey: 0,
        id: 0,
        name: 0,
        number: 10,
        page: 1,
        projectgroupid: '',
        reason: '',
        st: 0,
        submissionDate: '',
        theme: '',
        userName: '',
      })
      .then((res) => {
        // console.log("管理员--请假查询成功了",res.data)
        const p = res.data.returnDate;
        const newP = p.map((dataObj) => {
          return {
            申请提交日期: dataObj.submissionDate,
            院系: dataObj.dkey,
            专业: dataObj.gkey,
            年级: dataObj.gradeKey,
            班级: dataObj.className,
            小组: dataObj.projectGroupId,
            学号: dataObj.account,
            姓名: dataObj.userName,
            主题: dataObj.theme,
            请假原因: dataObj.reason,
            原因说明: dataObj.explain,
            请假开始时间: dataObj.startDateTime,
            请假结束时间: dataObj.endDateTime,
            审批状态: dataObj.st,
            审批人: dataObj.teacherName,
            leaveInfoId: dataObj.leaveInfoId,
          };
        });
        setdata(newP);
        setsum(res.data.paginationData.sum);
        setsumPage(res.data.paginationData.sumPage);
        setpagination('false');
      });
  };

  //获取选择日期
  const DateChange = (date, dateString) => {
    setgDate(dateString);
  };

  return (
    <div className="aForm">
      <Form>
        <span>
          提交日期:{' '}
          <Space direction="vertical" size={12}>
            <DatePicker
              onChange={DateChange}
              placeholder="请选择日期"
              style={{ width: 206 }}
            />
          </Space>
        </span>
        <span style={{ marginLeft: 30 }}>
          院系:{' '}
          <Select
            showSearch
            style={{ width: 200 }}
            placeholder="请选择"
            onChange={(e, index) => {
              setgCollege(parseInt(index.key));
            }}
          >
            {College.map((cNameObj) => {
              return (
                <Option key={cNameObj.id} value={cNameObj.format}>
                  {cNameObj.format}
                </Option>
              );
            })}
          </Select>
        </span>
        <span style={{ marginLeft: 30 }}>
          专业:{' '}
          <Select
            showSearch
            style={{ width: 200 }}
            placeholder="请选择"
            onChange={(e, index) => {
              setgMajor(parseInt(index.key));
            }}
          >
            {Major.map((cNameObj) => {
              return (
                <Option key={cNameObj.id} value={cNameObj.format}>
                  {cNameObj.format}
                </Option>
              );
            })}
          </Select>
        </span>
        <span style={{ marginLeft: 30 }}>
          年级:
          <Select
            showSearch
            style={{ width: 200 }}
            placeholder="请选择"
            onChange={(e, index) => {
              setgGrade(parseInt(index.key));
            }}
          >
            {Grade.map((cNameObj) => {
              return (
                <Option key={cNameObj.id} value={cNameObj.format}>
                  {cNameObj.format}
                </Option>
              );
            })}
          </Select>
        </span>
        <br />
        <br />
        <div className="second">
          <span>
            班级:{' '}
            <Select
              showSearch
              style={{ width: 206 }}
              placeholder="请选择"
              onChange={(e, index) => {
                setgClass1(index.value);
              }}
            >
              {Class1.map((cNameObj) => {
                return (
                  <Option key={cNameObj.id} value={cNameObj.format}>
                    {cNameObj.format}
                  </Option>
                );
              })}
            </Select>
          </span>
          <span style={{ marginLeft: 30 }}>
            小组:{' '}
            <Select
              showSearch
              style={{ width: 200 }}
              placeholder="请选择"
              onChange={(e, index) => {
                setgGroup(parseInt(index.key));
              }}
            >
              {Group.map((cNameObj) => {
                return (
                  <Option key={cNameObj.id} value={cNameObj.format}>
                    {cNameObj.format}
                  </Option>
                );
              })}
            </Select>
          </span>
          <span style={{ marginLeft: 30 }}>
            学号:{' '}
            <Input
              placeholder="精确匹配"
              style={{ width: 200 }}
              onChange={(e, index) => {
                setgStudentNumber(e.target.value);
              }}
            />
          </span>
          <span style={{ marginLeft: 15 }}>
            姓名:{' '}
            <Input
              placeholder="支持模糊查询"
              style={{ width: 200 }}
              onChange={(e, index) => {
                setgName(e.target.value);
              }}
            />
          </span>
        </div>
        <br />
        <br />
        <div className="third">
          <span style={{ marginLeft: 2 }}>
            主题:{' '}
            <Input
              placeholder="支持模糊查询"
              style={{ width: 204 }}
              onChange={(e, index) => {
                setgTheme(e.target.value);
              }}
            />
          </span>
          <span style={{ marginLeft: 2 }}>
            请假原因:{' '}
            <Select
              showSearch
              style={{ width: 200 }}
              placeholder="请选择"
              onChange={(e, index) => {
                setgReason(parseInt(index.key));
              }}
            >
              {Reason.map((cNameObj) => {
                return (
                  <Option key={cNameObj.id} value={cNameObj.reason}>
                    {cNameObj.reason}
                  </Option>
                );
              })}
            </Select>
          </span>
          <span style={{ marginLeft: 2 }}>
            审批状态:{' '}
            <Select
              showSearch
              style={{ width: 200 }}
              placeholder="请选择"
              onChange={(e, index) => {
                setgState(parseInt(index.key));
              }}
            >
              {State.map((cNameObj) => {
                return (
                  <Option key={cNameObj.id} value={cNameObj.state}>
                    {cNameObj.state}
                  </Option>
                );
              })}
            </Select>
          </span>
          <span style={{ marginLeft: 18 }}>
            审批人:{' '}
            <Select
              showSearch
              style={{ width: 200 }}
              placeholder="请选择"
              onChange={(e, index) => {
                setgPerson(parseInt(index.key));
              }}
            >
              {Person.map((cNameObj) => {
                return (
                  <Option key={cNameObj.id} value={cNameObj.format}>
                    {cNameObj.format}
                  </Option>
                );
              })}
            </Select>
          </span>
        </div>
        <Button
          type="primary"
          style={{ marginLeft: 1120, top: -45 }}
          onClick={Query}
        >
          查询
        </Button>
        <Button style={{ marginLeft: 20, top: -45 }} onClick={reset}>
          重置
        </Button>
        <div className="form" style={{ marginTop: -50, marginLeft: -30 }}>
          {loading == 0 ? (
            <div className="example">
              <Spin size="large" />
            </div>
          ) : (
            <div>
              <Table columns={columns} dataSource={data} pagination={false} />
              <div>
                <Pagination
                  total={sum}
                  onChange={pageChange}
                  hideOnSinglePage={true}
                />
              </div>
            </div>
          )}
        </div>
      </Form>
    </div>
  );
};

export default Absence;
